<template>
  <div>
    <BillHeader></BillHeader>
    <div class="total-title">
      <div class="total-title-month">月份</div>
      <div class="total-title-get">收入</div>
      <div class="total-title-pay">支出</div>
      <div class="total-title-money">结余</div>
    </div>
    <div class="scroll-content">
      <BillContent v-for="(info,index) in monthlyInfo" :key="index" :info="info" ></BillContent>
    </div>
  </div>
</template>

<script>
import BillHeader from './BillHeader/index.vue';
import BillContent from './BillContent/index.vue';
import { mapState } from 'vuex';
export default {
    name: "UserBill",
    components: { BillHeader, BillContent },
    computed:{
      ...mapState('UserBill',['year','monthlyInfo']),
    },
    mounted() {
      this.$store.dispatch('UserBill/updateYear',this.year);
    },
}
</script>

<style scoped>
  .total-title{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 4vh;
    line-height: 4vh;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  }
  .total-title-month{
    width: 24%;
    padding-left: 5%;
  }
  .total-title div{
    width: 24%;
    font-size: 14px;
    color: silver;
  }
  .scroll-content{
    height: 60vh;
    width: 100vw;
    overflow: auto;
  }
  
</style>